<template>
  <div class="main container m-4">
<!--    时钟  当前登录管理员信息-->
    <div class="row">
      <div class="col-md-5">
        <div class="admin_info row">
          <div class="col-md-5">
            <el-avatar :size="100" :src="circleUrl"></el-avatar>
          </div>
          <div class="col-md-7 pt-4">
            <h4 style="font-size: 22px;font-weight: bold">{{this.adminForm.admin_name}}</h4>
            <span style="font-size: 16px;font-weight: bold;color: #99a9bf">当前登录管理员</span>
          </div>
      </div>
      </div>
      <div class="col-md-6 clock_main ml-3 mt-1">
        <div class="clock">
          <div class="flip">
            <div class="digital front" :data-number="nextTimes[0]"></div>
            <div class="digital back" :data-number="nowTimes[0]"></div>
          </div>
          <div class="flip">
            <div class="digital front" :data-number="nextTimes[1]"></div>
            <div class="digital back" :data-number="nowTimes[1]"></div>
          </div>
          <em class="divider">:</em>
          <div class="flip">
            <div class="digital front" :data-number="nextTimes[2]"></div>
            <div class="digital back" :data-number="nowTimes[2]"></div>
          </div>
          <div class="flip">
            <div class="digital front" :data-number="nextTimes[3]"></div>
            <div class="digital back" :data-number="nowTimes[3]"></div>
          </div>
          <em class="divider">:</em>
          <div class="flip">
            <div class="digital front" :data-number="nextTimes[4]"></div>
            <div class="digital back" :data-number="nowTimes[4]"></div>
          </div>
          <div class="flip">
            <div class="digital front" :data-number="nextTimes[5]"></div>
            <div class="digital back" :data-number="nowTimes[5]"></div>
          </div>
        </div>
        <div class="datefontclass" align="center">
          {{year}}-{{month}}-{{day}}&nbsp;&nbsp;&nbsp;{{week}}
        </div>
      </div>
    </div>
<!--图表-->
    <div class="echarts_main">
      <div class="row">
        <user_cnt></user_cnt>
      </div>
      <div class="row">
        <div class="col-md-6">
          <idle_cnt></idle_cnt>
        </div>
        <div class="col-md-5 ml-5">
          <post_cnt></post_cnt>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getNowAdminInfo} from "@/api/Admin";
import user_cnt from "@/components/pages/main/user_cnt";
import post_cnt from "@/components/pages/main/post_cnt";
import idle_cnt from "@/components/pages/main/idle_cnt";


export default {
  name: "show_main",
  components:{
    user_cnt,
    post_cnt,
    idle_cnt,
  },
  data () {
    return {
      adminForm:{
        admin_name:'',
      },
      circleUrl:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      duration: 650,
      nowTimes: [],
      nextTimes: [],
      timer: {},
      year:'',
      month:'',
      day:'',
      week:'',



    }
  },

  methods:{

    //获取管理员信息
    init(){
      getNowAdminInfo({
        // token: window.sessionStorage.getItem('token')
      }).then(res=>{
        this.adminForm.admin_name=res.data.admin_name;
      });

    },
    initDate() {
      let now = new Date();
      this.nowTimes = this.getTimeFromDate(new Date(now.getTime() - 1000));
      this.nextTimes = this.getTimeFromDate(now);
      this.year = new Date().getFullYear();  //年
      this.month = new Date().getMonth() +1; //月份是从0月开始获取的，所以要+1;
      this.day = new Date().getDate(); //日
      let wk = now.getDay();
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      this.week=weeks[wk];
    },
    updateTime() {
      let now = new Date();
      let nowTimes = this.getTimeFromDate(new Date(now.getTime() - 1000));
      let nextTimes = this.getTimeFromDate(now);;
      for (let i = 0; i < 6; i++) {
        if (nowTimes[i] !== nextTimes[i]) {
          this.setSpin(i, nowTimes[i], nextTimes[i]);
        }
      }
    },
    setSpin(index, nowTime, nextTime) {
      let nodes = document.querySelectorAll(".flip");
      nodes[index].classList.add('running');
      this.nowTimes.splice(index, 1, nowTime);
      this.nextTimes.splice(index, 1, nextTime);
      setTimeout(() => {
        nodes[index].classList.remove('running');
        this.nowTimes.splice(index, 1, nextTime);
      }, this.duration)
    },
    getTimeFromDate(date) {
      let numTime = [];
      let timeStr = date
          .toTimeString()
          .slice(0, 8)
          .split(":")
          .join("");
      for (let i = 0; i < timeStr.length; i++) {
        numTime.push(parseInt(timeStr[i]));
      }
      return numTime;
    },
    destroyed() {
      // 销毁定时器
      clearInterval(this.timer);
    }


  },
  mounted() {
    this.initDate();
    this.timer = setInterval(() => {
      this.updateTime();
    }, 1000);

  },
  created() {
    let _this=this;
    _this.init();


  }
}
</script>

<style scoped>
.admin_info{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  padding: 15px;
}
/*时钟样式*/
.clock {
  display: flex;
}
.clock .divider {
  font-size: 66px;
  line-height: 102px;
  font-style: normal;
}
.clock .flip {
  position: relative;
  width: 60px;
  height: 100px;
  margin: 2px;
  font-size: 66px;
  line-height: 100px;
  text-align: center;
  background: white;
  border: 1px solid black;
  border-radius: 12px;
}
.clock .flip .digital::before, .clock .flip .digital::after {
  position: absolute;
  content: attr(data-number);
  left: 0;
  right: 0;
  color: white;
  background: black;
  overflow: hidden;
  -webkit-perspective: 160px;
  perspective: 160px;
}
.clock .flip .digital::before {
  top: 0;
  bottom: 50%;
  border-bottom: 1px solid #666;
  border-radius: 10px 10px 0 0;
}
.clock .flip .digital::after {
  top: 50%;
  bottom: 0;
  line-height: 0;
  border-radius: 0 0 10px 10px;
}
.clock .flip .back::before,
.clock .flip .front::after {
  z-index: 1;
}
.clock .flip .back::after {
  z-index: 2;
}
.clock .flip .front::before {
  z-index: 3;
}
.clock .flip .back::after {
  -webkit-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotateX(0.5turn);
  transform: rotateX(0.5turn);
}
.clock .flip.running .front::before {
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation: frontFlipDown 0.6s ease-in-out;
  animation: frontFlipDown 0.6s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.clock .flip.running .back::after {
  -webkit-animation: backFlipDown 0.6s ease-in-out;
  animation: backFlipDown 0.6s ease-in-out;
}
@-webkit-keyframes frontFlipDown {
  to {
    -webkit-transform: rotateX(0.5turn);
    transform: rotateX(0.5turn);
  }
}
@keyframes frontFlipDown {
  to {
    -webkit-transform: rotateX(0.5turn);
    transform: rotateX(0.5turn);
  }
}
@-webkit-keyframes backFlipDown {
  to {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
}
@keyframes backFlipDown {
  to {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
}
.datefontclass{
  font-size: 26px;
  font-weight: bold;
  color: black;
}
.border{
  border-color: black;
  border-width: 4px;
  border-radius: 5px;
}
</style>
